﻿<!DOCTYPE html>
<html>

<head id="Head1" runat="server">
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>运营管理看板</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
  <link rel="Shortcut Icon" href="../images/aecc.ico" type="image/x-icon" />
  <link rel="stylesheet" href="../StaticFiles/layui/dist/css/layui.css" />
  <link rel="stylesheet" href="../StaticFiles/layui/admin.css" />
  <script type="text/javascript" src="../Scripts/json2.js"></script>
  <script type="text/javascript" src="../Scripts/jquery-1.11.2.min.js"></script>
  <style type="text/css">
    html {
      background-image: url(../images/bg3.jpg);
      background-repeat: no-repeat;
    }

    body {
      font-family: "微软雅黑";
      padding: 0px 10px 0px 10px;
      color: #fff;
    }

    /*看板标题*/
    #header-title {
      height: 60px;
      line-height: 60px;
      text-align: center;
      font-size: 30px;
    }

    /*看板当前时间*/
    #header-time {
      height: 60px;
      line-height: 60px;
      text-align: right;
      font-size: 14px;
      font-weight: bold;
    }

    /*事业部愿景*/
    #wish {
      text-align: center;
      font-size: 16px;
      font-weight: bold;
      height: 30px;
      line-height: 30px;
    }

    svg {
      height: 240px;
    }

    .layui-card {
      background-color: transparent;
      border: 1px dashed #1E9FFF;
    }

    .layui-card-header {
      color: #FFF;
      border: none;
      text-align: center;
      font-size: 20px;
      font-weight: bold;
      letter-spacing: 0.1em;
    }

    /*左上图片*/
    .bg-left-top {
      position: absolute;
      left: -2px;
      top: -2px;
      width: 25px;
      height: 25px;
      background-image: url(../images/left-top.png);
    }

    /*左下图片*/
    .bg-left-bottom {
      position: absolute;
      left: -2px;
      bottom: -2px;
      width: 25px;
      height: 25px;
      background-image: url(../images/left-bottom.png);
    }

    /*右上图片*/
    .bg-right-top {
      position: absolute;
      right: -2px;
      top: -2px;
      width: 25px;
      height: 25px;
      background-image: url(../images/right-top.png);
    }

    /*右下图片*/
    .bg-right-bottom {
      position: absolute;
      bottom: -2px;
      right: -2px;
      width: 25px;
      height: 25px;
      background-image: url(../images/right-bottom.png);
    }

    .layui-table-view th {
      font-weight: bold;
      font-size: 16px;
      text-align: center;
      color: #009688;
    }

    .layui-layer-title {
      text-align: center;
      font-weight: bold;
      font-size: 18px !important;
      color: #009688 !important;
    }

    /*安灯状态*/
    .status {
      width: 30px;
      height: 30px;
      margin: 0 auto;
      border-radius: 15px;
      background: #00FF00;
      line-height: 30px;
      font-size: 16px;
      font-weight: bold;
      cursor: pointer;
    }

    .workcentet {
      height: 40px;
      line-height: 40px;
      margin: 10px 0px;
      font-weight: bold;
    }

    .layui-table {
      color: #fff;
      background: transparent !important;
      text-align: center;
    }
  </style>
</head>

<body>
  <!--[if lt IE 9]>
        <script type="text/javascript">
            alert("此页面包含SVG等HTML5高级特性，无法在IE8浏览器中运行。请在Chrome浏览器中打开，或请联系管理员安装Chrome浏览器！");
            window.close();
        </script>
    <![endif]-->

  <div class="layui-row" id="header">
    <div class="layui-col-md3">
      <div>
        <img src="../images/aeec_logo.png" alt="" height="60" />
      </div>
    </div>
    <div class="layui-col-md6" id="header-title">
      装配厂运营管理看板
    </div>
    <div class="layui-col-md3" id="header-time">
    </div>
  </div>
  <div class="layui-row">
    <div class="layui-col-md12">
      <div id="wish">
        <img src="../images/愿景.png" height="20" alt="" />
        事业部愿景：提升核心能力，成为中国一流中小推力航空发动机总装总试单位
      </div>
    </div>
  </div>
  <div class="layui-fluid" style="padding:0px;">
    <div class="layui-row">
      <!-- 左侧 -->
      <div class="layui-col-md9">
        <!-- SQCDP -->
        <div class="layui-card">
          <div class="layui-card-body" style="padding-top:10px;padding-bottom:10px;">
            <div class="bg-left-top">
            </div>
            <div class="bg-right-top">
            </div>
            <div class="layui-row" style="height:240px;">
              <div class="layui-col-md2 layui-col-md-offset1" id="s-chart">
              </div>
              <div class="layui-col-md2" id="q-chart">
              </div>
              <div class="layui-col-md2" id="c-chart">
              </div>
              <div class="layui-col-md2" id="d-chart">
              </div>
              <div class="layui-col-md2" id="p-chart">
              </div>
            </div>

            <div class="bg-left-bottom">
            </div>
            <div class="bg-right-bottom">
            </div>
          </div>
        </div>
        <!-- SQCDP -->
        <!-- S和Q柱状图 -->
        <div class="layui-row layui-col-space10">
          <div class="layui-col-md6">
            <div class="layui-card">
              <div class="layui-card-header">
                <div class="bg-left-top">
                </div>
                <div class="bg-right-top">
                </div>
                <img src="../images/safe_blue.png" height="30" alt="" />
                S(安全)指标执行得分
              </div>
              <div class="layui-card-body" style="padding-top:0px;">
                <div id="s" style="height:180px;">
                </div>
                <div class="bg-left-bottom">
                </div>
                <div class="bg-right-bottom">
                </div>
              </div>
            </div>
          </div>
          <div class="layui-col-md6">
            <div class="layui-card">
              <div class="layui-card-header">
                <div class="bg-left-top">
                </div>
                <div class="bg-right-top">
                </div>
                <img src="../images/quality_blue.png" height="30" alt="" />
                Q(质量)指标执行得分
              </div>
              <div class="layui-card-body" style="padding-top:0px;">
                <div id="q" style="height:180px;">
                </div>
                <div class="bg-left-bottom">
                </div>
                <div class="bg-right-bottom">
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- S和Q柱状图 end -->
        <!-- C和P柱状图 start -->
        <div class="layui-row layui-col-space10">
          <div class="layui-col-md6">
            <div class="layui-card">
              <div class="layui-card-header">
                <div class="bg-left-top">
                </div>
                <div class="bg-right-top">
                </div>
                <img src="../images/cost_blue.png" height="30" alt="" />
                C(成本)指标执行得分
              </div>
              <div class="layui-card-body" style="padding-top:0px;">
                <div id="c" style="height:180px;">
                </div>
                <div class="bg-left-bottom">
                </div>
                <div class="bg-right-bottom">
                </div>
              </div>
            </div>
          </div>
          <div class="layui-col-md6">
            <div class="layui-card">
              <div class="layui-card-header">
                <div class="bg-left-top">
                </div>
                <div class="bg-right-top">
                </div>
                <img src="../images/person_blue.png" height="30" alt="" />
                P(人员)指标执行得分
              </div>
              <div class="layui-card-body" style="padding-top:0px;">
                <div id="p" style="height:180px;">
                </div>
                <div class="bg-left-bottom">
                </div>
                <div class="bg-right-bottom">
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- C和P柱状图 end -->
        <!--  D指标 -->
        <div class="layui-row layui-col-space10">
          <div class="layui-col-md12">
            <div class="layui-card">
              <div class="layui-card-header">
                <div class="bg-left-top">
                </div>
                <div class="bg-right-top">
                </div>
                <img src="../images/交付_蓝.png" height="30" alt="" />
                D(交付)指标执行情况
              </div>
              <div class="layui-card-body" style="padding-top:0px;padding-bottom:0px;">
                <div class="layui-row">
                  <div class="layui-col-md4">
                    <div class="layui-card" style="border:none;">
                      <div class="layui-card-header">
                        <img src="../images/lot_blue.png" height="30" alt="" />
                        批产
                      </div>
                      <div class="layui-card-body" style="padding-top:0px;">
                        <div id="pichan" style="height:120px;">
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="layui-col-md4">
                    <div class="layui-card" style="border:none;">
                      <div class="layui-card-header">
                        <img src="../images/new_blue.png" height="30" alt="" />
                        新机
                      </div>
                      <div class="layui-card-body" style="padding-top:0px;">
                        <div id="xinji" style="height:120px;">
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="layui-col-md4">
                    <div class="layui-card" style="border:none;">
                      <div class="layui-card-header">
                        <img src="../images/检查_蓝.png" height="30" alt="" />
                        检修
                      </div>
                      <div class="layui-card-body" style="padding-top:0px;">
                        <div id="jianxiu" style="height:120px;">
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="bg-left-bottom">
                </div>
                <div class="bg-right-bottom">
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- D指标 -->
      </div>
      <!-- 右侧 -->
      <div class="layui-col-md3">
        <div class="layui-card" style="margin-left:10px;margin-bottom:10px;">
          <div class="layui-card-header">
            <div class="bg-left-top">
            </div>
            <div class="bg-right-top">
            </div>
            <img src="../images/问题_蓝.png" height="30" alt="" />
            快速响应
          </div>
          <div class="layui-card-body" style="padding:0;">
            <div style="height:711px;">
              <div id="problem" style="padding:0px 5px;height:531px;overflow:hidden;">
                <table class="layui-table">
                  <tr>
                    <th>序号</th>
                    <th>问题内容</th>
                    <th>责任人</th>
                    <th>时间节点</th>
                    <th>超期天数</th>
                  </tr>
                  <tr>
                    <td>1</td>
                    <td>问题1....</td>
                    <td>张三</td>
                    <td>2020/7/1</td>
                    <td>2</td>
                  </tr>
                  <tr>
                    <td>1</td>
                    <td>问题1....</td>
                    <td>张三</td>
                    <td>2020/7/1</td>
                    <td>2</td>
                  </tr>
                  <tr>
                    <td>1</td>
                    <td>问题1....</td>
                    <td>张三</td>
                    <td>2020/7/1</td>
                    <td>2</td>
                  </tr>
                  <tr>
                    <td>1</td>
                    <td>问题1....</td>
                    <td>张三</td>
                    <td>2020/7/1</td>
                    <td>2</td>
                  </tr>
                  <tr>
                    <td>1</td>
                    <td>问题1....</td>
                    <td>张三</td>
                    <td>2020/7/1</td>
                    <td>2</td>
                  </tr>
                  <tr>
                    <td>1</td>
                    <td>问题1....</td>
                    <td>张三</td>
                    <td>2020/7/1</td>
                    <td>2</td>
                  </tr>
                  <tr>
                    <td>1</td>
                    <td>问题1....</td>
                    <td>张三</td>
                    <td>2020/7/1</td>
                    <td>2</td>
                  </tr>
                  <tr>
                    <td>1</td>
                    <td>问题1....</td>
                    <td>张三</td>
                    <td>2020/7/1</td>
                    <td>2</td>
                  </tr>
                  <tr>
                    <td>1</td>
                    <td>问题1....</td>
                    <td>张三</td>
                    <td>2020/7/1</td>
                    <td>2</td>
                  </tr>
                  <tr>
                    <td>1</td>
                    <td>问题1....</td>
                    <td>张三</td>
                    <td>2020/7/1</td>
                    <td>2</td>
                  </tr>
                </table>
              </div>

              <div id="an-deng" style="height:180px;margin-top:10px;">
                <div class="layui-row" style="text-align:center;">
                  <div class="layui-col-md4">
                    <h2 class="status" style="background:#FF0000;">
                      1
                    </h2>
                    <p class="workcentet">
                      第一装配中心
                    </p>
                  </div>
                  <div class="layui-col-md4">
                    <h2 class="status" style="background:#FFFF00;">
                      1
                    </h2>
                    <p class="workcentet">
                      第二装配中心
                    </p>
                  </div>
                  <div class="layui-col-md4">
                    <h2 class="status">
                      1
                    </h2>
                    <p class="workcentet">
                      试车中心
                    </p>
                  </div>
                  <div class="layui-col-md4">
                    <h2 class="status">
                      1
                    </h2>
                    <p class="workcentet">
                      生产室
                    </p>
                  </div>
                  <div class="layui-col-md4">
                    <h2 class="status">
                      1
                    </h2>
                    <p class="workcentet">
                      技术室
                    </p>
                  </div>
                  <div class="layui-col-md4">
                    <h2 class="status">
                      1
                    </h2>
                    <p class="workcentet">
                      综合室
                    </p>
                  </div>
                </div>
              </div>
            </div>
            <div class="bg-left-bottom">
            </div>
            <div class="bg-right-bottom">
            </div>
          </div>
        </div>

        <div class="layui-card" style="margin-left:10px;">
          <div class="layui-card-header">
            <div class="bg-left-top">
            </div>
            <div class="bg-right-top">
            </div>
            <img src="../images/notice_blue.png" height="30" alt="" />
            通知公告
          </div>
          <div class="layui-card-body" style="padding-top:0px;">
            <div id="notice" style="height:162px;">
              <p style="text-indent:1em;">
                1.近期新冠病毒虽然得到控制，但在京地方出现反复，请广大职工假期出行尽量不要去北京。611期间，工作强度较大，请各位员工不要注意身体，若有身体不适请及时上报。
              </p>
            </div>
            <div class="bg-left-bottom">
            </div>
            <div class="bg-right-bottom">
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <script src="../Scripts/echarts/echarts-5.4.0.min.js"></script>
  <script type="text/javascript" src="../StaticFiles/layui/dist/layui.js"></script>
  <script type="text/javascript">
    $(function () {

      $(".layui-card:last-child").css({ "marginBottom": "0px" });
      function getUrlParam(name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
        var r = window.location.search.substr(1).match(reg);  //匹配目标参数
        if (r != null) return unescape(r[2]); return null; //返回参数值
      };
      var $factoryid = getUrlParam('factoryid');

      // 页面右上方时钟
      function showTime() {
        var currentTime = new Date();
        var year = currentTime.getFullYear();
        var month = currentTime.getMonth() + 1;
        var date = currentTime.getDate();
        var day = currentTime.getDay();
        var hours = currentTime.getHours();
        var minutes = currentTime.getMinutes();
        var seconds = currentTime.getSeconds();
        var time = document.getElementById("header-time");
        if (seconds < 10) {
          seconds = "0" + seconds;
        }
        if (minutes < 10) {
          minutes = "0" + minutes;
        }
        time.innerHTML = year + "年" + month + "月" + date + "日   " + hours + " : " + minutes + " : " + seconds;
      };
      setInterval(showTime, 500);

      layui.use(['layer', 'table'], function () {
        var table = layui.table;
        var layer = layui.layer;

        //弹出层通用方法
        function openDialog(config) {
          layer.open({
            title: config.title,
            type: 1,
            content: "<table class='layui-hide' id='test'></table>",
            area: ['98%', '98%'],
            skin: 'layui-layer-rim',
            success: function (layero) {
              table.render({
                elem: '#test',
                url: config.url,
                method: config.method,
                cols: config.cols,
                where: config.QueryString,
                request: {
                  pageName: 'page', //页码的参数名称，默认：page
                  limitName: 'rows' //每页数据量的参数名，默认：limit
                },
                cellMinWidth: 80,
                page: {
                  theme: '#1E9FFF'
                },
                text: {
                  none: '暂无相关数据' //默认：无数据。注：该属性为 layui 2.2.5 开始新增
                }
              });
            }
          });
        };

        function addElement(path, color, day, x, y, svg) {
          //绘制日期网格
          var c = document.createElementNS('http://www.w3.org/2000/svg', 'path');
          c.setAttribute('stroke', '#000'); //线条颜色
          c.setAttribute('d', path); //线条路径坐标
          c.setAttribute('stroke-width', '1.5');

          if (color === "red") {
            c.setAttribute('fill', '#FF0000'); //红背景色
          } else if (color === "green") {
            c.setAttribute('fill', '#00FF00'); //绿背景色
          } else {
            c.setAttribute('fill', '#FFF'); //白背景色
          }

          svg.appendChild(c);

          //日期文本
          var t = document.createElementNS('http://www.w3.org/2000/svg', 'text');
          t.setAttribute("x", parseInt(x) - 5);
          t.setAttribute("y", parseInt(y) + 5);
          t.setAttribute('font-size', '12');
          t.setAttribute("stroke", "#000");
          t.setAttribute("cursor", "pointer");
          t.innerHTML = day;
          //t.setAttribute("onclick", "alert("+day+")");
          svg.appendChild(t);
        }

        //S--SVG图
        function createSafeChart() {
          var body = document.getElementById("s-chart");
          var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
          svg.setAttribute("viewBox", "0 0 270 360");
          svg.setAttribute("onclick", "alert('S')");
          body.appendChild(svg);

          //生成文字'S'
          var t = document.createElementNS('http://www.w3.org/2000/svg', 'text');
          t.setAttribute("x", 101.5);
          t.setAttribute("y", 126.475147);
          t.setAttribute("transform", "matrix(16.625954189664085,0,0,13.281110010907954,-1686.664063439021,-1388.4654854874102)");
          t.setAttribute('font-size', '24');
          t.setAttribute('id', 'svg_1');
          t.setAttribute('font-family', 'Helvetica, Arial, sans-serif');
          t.setAttribute('text-anchor', 'start');
          t.setAttribute('fill', '#c9c0c0');
          t.innerHTML = 'S';
          svg.appendChild(t);

          //生成文字'SAFETY'
          t = document.createElementNS('http://www.w3.org/2000/svg', 'text');
          t.setAttribute("x", 90);
          t.setAttribute("y", 15);
          t.setAttribute('font-size', '20');
          t.setAttribute("stroke", "#FFF");
          t.setAttribute("fill", "#FFF");
          t.setAttribute('font-family', '微软雅黑');
          t.innerHTML = "SAFETY";
          svg.appendChild(t);

          //生成文字'安 全'
          t = document.createElementNS('http://www.w3.org/2000/svg', 'text');
          t.setAttribute("x", 105);
          t.setAttribute("y", 40);
          t.setAttribute('font-size', '20');
          t.setAttribute("stroke", "#FFF");
          t.setAttribute("fill", "#FFF");
          t.setAttribute('font-family', '微软雅黑');
          t.innerHTML = "安 全";
          svg.appendChild(t);

          //生成红色标记
          t = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
          t.setAttribute("x", 75);
          t.setAttribute("y", 310);
          t.setAttribute("stroke", "red");
          t.setAttribute("fill", "red");
          t.setAttribute("width", "18");
          t.setAttribute("height", "18");
          svg.appendChild(t);

          //生产文字'问题数 > 1'
          t = document.createElementNS('http://www.w3.org/2000/svg', 'text');
          t.setAttribute("x", 100);
          t.setAttribute("y", 325);
          t.setAttribute('font-size', '20');
          t.setAttribute("stroke", "#FFF");
          t.setAttribute("fill", "#FFF");
          t.setAttribute('font-family', '微软雅黑');
          t.innerHTML = "问题数 > 1";
          svg.appendChild(t);

          //生成绿色标记
          t = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
          t.setAttribute("x", 75);
          t.setAttribute("y", 335);
          t.setAttribute("stroke", "#00FF00");
          t.setAttribute("fill", "#00FF00");
          t.setAttribute("width", "18");
          t.setAttribute("height", "18");
          svg.appendChild(t);

          //生成文字'问题数 = 0'
          t = document.createElementNS('http://www.w3.org/2000/svg', 'text');
          t.setAttribute("x", 100);
          t.setAttribute("y", 350);
          t.setAttribute('font-size', '20');
          t.setAttribute("stroke", "#FFF");
          t.setAttribute("fill", "#FFF");
          t.setAttribute('font-family', '微软雅黑');
          t.innerHTML = "问题数 = 0";
          svg.appendChild(t);

          addElement('m17 217,L 53 214 Q 55 222 57 228 L 21 237 Q 18 226 17 217', 'red', 1, 38, 223, svg);
          addElement('m21 237,L 57 228 Q 59 234 63 239 L 33 257 Q 25 246 21 237', 'green', 2, 43, 240, svg);
          addElement('m33 257,L 63 239 Q 67 245 74 250 L 48 272 Q 39 265 33 257', 'green', 3, 54, 256, svg);
          addElement('m48 272,L 74 250 Q 80 255 89 258 L 71 284 Q 59 279 48 272', 'green', 4, 70, 267, svg);
          addElement('m71 284,L 89 258 Q 97 261 106 264 L 98 291 Q 84 288 71 284', 'green', 5, 92, 275, svg);
          addElement('m98 291,L 106 264 Q 116 266 128 267 L 127 295 Q 113 293 98 291', 'green', 6, 116, 279, svg);
          addElement('m127 295,L 128 267 Q 138 268 151 268 L 155 294 Q 141 295 127 295', 'green', 7, 142, 281, svg);
          addElement('m155 294,L 151 268 Q 163 265 173 263 L 183 289 Q 168 292 155 294', 'green', 8, 167, 279, svg);
          addElement('m183 289,L 173 263 Q 182 260 190 256 L 209 279 Q 196 285 183 289', 'green', 9, 189, 272, svg);
          addElement('m209 279,L 190 256 Q 197 252 202 246 L 229 264 Q 221 271 209 279', 'green', 10, 205, 261, svg);
          addElement('m229 264,L 202 246 Q 205 241 208 235 L 242 244 Q 237 254 229 264', 'green', 11, 220, 247, svg);
          addElement('m242 244,L 208 235 Q 209 228 208 223 L 245 220 Q 245 230 242 244', 'green', 12, 225, 230, svg);
          addElement('m245 220,L 208 223 Q 206 217 202 211 L 237 198 Q 242 207 245 220', 'red', 13, 224, 212, svg);
          addElement('m237 198,L 202 211 Q 198 207 191 202 L 216 179 Q 226 186 237 198', 'green', 14, 210, 196, svg);
          addElement('m216 179,L 191 202 Q 184 199 175 196 L 189 168 Q 201 172 216 179', 'green', 15, 190, 185, svg);
          addElement('m189 168,L 175 196 Q 164 193 152 190 L 162 161 Q 175 164 189 168', 'red', 16, 167, 180, svg);
          addElement('m162 161,L 152 190 Q 140 188 128 185 L 136 156 Q 149 159 162 161', 'green', 17, 143, 174, svg);
          addElement('m136 156,L 128 185 Q 115 183 102 180 L 113 152 Q 124 154 136 156', 'green', 18, 118, 167, svg);
          addElement('m113 152,L 102 180 Q 87 177 77 174 L 89 145 Q 100 149 113 152', 'green', 19, 93, 162, svg);
          addElement('m89 145,L 77 174 Q 63 168 50 160 L 73 136 Q 79 141 89 145', 'red', 20, 70, 154, svg);
          addElement('m73 136,L 50 160 Q 37 148 33 137 L 66 127 Q 68 131 73 136', 'green', 21, 51, 140, svg);
          addElement('m66 127,L 33 137 Q 29 121 33 111 L 66 114 Q 65 120 66 127', 'green', 22, 44, 121, svg);
          addElement('m66 114,L 32 111 Q 34 100 44 88 L 74 100 Q 68 107 66 114', 'red', 23, 50, 102, svg);
          addElement('m74 100,L 44 88 Q 52 78 67 70 L 85 92 Q 79 96 74 100', 'green', 24, 64, 85, svg);
          addElement('m85 92,L 67 70 Q 81 62 95 60 L 101 87 Q 93 89 85 92', 'green', 25, 85, 75, svg);
          addElement('m101 87,L 95 60 Q 108 56 124 57 L 123 85 Q 112 86 101 87', 'green', 26, 110, 70, svg);
          addElement('m123 85,L 124 57 Q 138 56.5 153 58.5 L 148 86 Q 137 85 123 85', '', 27, 137, 70, svg);
          addElement('m148 86,L 153 58.5 Q 167 61 181 65 L 169 90 Q 159 88 148 86', '', 28, 162, 74, svg);
          addElement('m169 90,L 181 65 Q 194 70 209 78 L 186 100 Q 179 95 169 90', '', 29, 184, 82, svg);
          addElement('m186 100,L 209 78 Q 219 87 229 101 L 196 113 Q 192 106 186 100', '', 30, 204, 98, svg);
          addElement('m196 113,L 229 101 Q 234 112 237 126 L 200 129 Q 199 121 196 113', '', 31, 214, 117, svg);
        };

        //Q--SVG图
        function createQualityChart() {
          var body = document.getElementById("q-chart");
          var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
          svg.setAttribute("viewBox", "0 0 270 360");
          body.appendChild(svg);

          var t = document.createElementNS('http://www.w3.org/2000/svg', 'text');
          t.setAttribute("x", 101.744892);
          t.setAttribute("y", 126.776327);
          t.setAttribute("transform", "matrix(14.292023137032933,0,0,13.28111001090795,-1454.9806297553127,-1390.46548548741) ");
          t.setAttribute('font-size', '24');
          t.setAttribute('id', 'svg_1');
          t.setAttribute('font-family', 'Helvetica, Arial, sans-serif');
          t.setAttribute('text-anchor', 'start');
          t.setAttribute('fill', '#c9c0c0');
          t.innerHTML = 'Q';
          svg.appendChild(t);

          t = document.createElementNS('http://www.w3.org/2000/svg', 'text');
          t.setAttribute("x", 90);
          t.setAttribute("y", 15);
          t.setAttribute('font-size', '20');
          t.setAttribute("stroke", "#FFF");
          t.setAttribute("fill", "#FFF");
          t.setAttribute('font-family', '微软雅黑');
          t.innerHTML = "QUALITY";
          svg.appendChild(t);

          t = document.createElementNS('http://www.w3.org/2000/svg', 'text');
          t.setAttribute("x", 105);
          t.setAttribute("y", 40);
          t.setAttribute('font-size', '20');
          t.setAttribute("stroke", "#FFF");
          t.setAttribute("fill", "#FFF");
          t.setAttribute('font-family', '微软雅黑');
          t.innerHTML = "质 量";
          svg.appendChild(t);

          //生成红色标记
          t = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
          t.setAttribute("x", 75);
          t.setAttribute("y", 310);
          t.setAttribute("stroke", "red");
          t.setAttribute("fill", "red");
          t.setAttribute("width", "18");
          t.setAttribute("height", "18");
          svg.appendChild(t);

          //生产文字'问题数 > 1'
          t = document.createElementNS('http://www.w3.org/2000/svg', 'text');
          t.setAttribute("x", 100);
          t.setAttribute("y", 325);
          t.setAttribute('font-size', '20');
          t.setAttribute("stroke", "#FFF");
          t.setAttribute("fill", "#FFF");
          t.setAttribute('font-family', '微软雅黑');
          t.innerHTML = "问题数 > 1";
          svg.appendChild(t);

          //生成绿色标记
          t = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
          t.setAttribute("x", 75);
          t.setAttribute("y", 335);
          t.setAttribute("stroke", "#00FF00");
          t.setAttribute("fill", "#00FF00");
          t.setAttribute("width", "18");
          t.setAttribute("height", "18");
          svg.appendChild(t);

          //生成文字'问题数 = 0'
          t = document.createElementNS('http://www.w3.org/2000/svg', 'text');
          t.setAttribute("x", 100);
          t.setAttribute("y", 350);
          t.setAttribute('font-size', '20');
          t.setAttribute("stroke", "#FFF");
          t.setAttribute("fill", "#FFF");
          t.setAttribute('font-family', '微软雅黑');
          t.innerHTML = "问题数 = 0";
          svg.appendChild(t);

          addElement('m124 270,L 122 296 Q 138 296 153 295 L 146 269 Q 135 271 124 270', 'red', 1, 137, 283, svg);
          addElement('m146 269,L 153 295  Q 173 290 189 282 L 164 265  Q 156 267 146 269', 'green', 2, 163, 278, svg);
          addElement('m164 265,L 189 282 Q 213 297 243 310 L 252 289 Q 228 278 211 268 L 186 251 Q 164 238 139 230 L 132 251 Q 147 256 164 265 ', 'green', 3, 188, 266, svg);
          addElement('m186 251,L 211 268  Q 216 264 222 256 L 196 241  Q 192 246 186 251', 'green', 4, 205, 254, svg);
          addElement('m196 241,L 222 256  Q 228 249 233 240 L 204 228  Q 200 235 196 241', 'green', 5, 217, 242, svg);
          addElement('m204 228,L 233 240  Q 238 230 241 221 L 210 213  Q 207 221 204 228', 'green', 6, 225, 226, svg);
          addElement('m210 213,L 241 221  Q 244 210 246 200 L 214 197  Q 212 204 210 213', 'green', 7, 230, 207, svg);
          addElement('m214 197,L 246 200  Q 248 189 248 179  L 215 180  Q 215 188 214 197', 'green', 8, 233, 189, svg);
          addElement('m 215 180,L 248 179  Q 248 169  247 160 L 214 163   Q 215 171  215 180', 'green', 9, 234, 170, svg);
          addElement('m214 163,L 247 160 Q 245 149 243 140 L 210 146  Q 212 154 214 163', 'green', 10, 226, 152, svg);
          addElement('m210 146,L 243 140  Q 240 131 236 123 L 205 131  Q 208 138 210 146', 'green', 11, 223, 135, svg);
          addElement('m205 131,L 236 123  Q 231 113 225 103 L 196 116  Q 201 123 205 131', 'red', 12, 213, 117, svg);
          addElement('m196 116 ,L 225 103  Q 215 92 207 85  L 185 104  Q 190 109 196 116', 'green', 13, 203, 100, svg);
          addElement('m185 104,L 207 85  Q 196 78  186 73 L 169 94   Q 178 99 185 104', 'green', 14, 184, 88, svg);
          addElement('m169 94,L186 73  Q171 67 158 63 L 150 88  Q 159 91 169 94 ', 'green', 15, 163, 79, svg);
          addElement('m150 88 ,L 158 63  Q 142 61 128 61 L 128 86  Q 138 86 150 88', 'green', 16, 138, 74, svg);
          addElement('m128 86 ,L 128 61  Q 113 61 99 64 L 107 89  Q 116 87 128 86', 'green', 17, 113, 73, svg);
          addElement('m107 89 ,L 99 64  Q 85 68 74 73  L 88 96  Q 97 92 107 89', 'green', 18, 90, 79, svg);
          addElement('m88 96,L 74 73   Q 63 78 55 85 L 74 105   Q 81 101 88 96', 'green', 19, 69, 87, svg);
          addElement('m74 105,L55 85  Q 45 93 37 103 L 62 118  Q 67 112 74 105', 'green', 20, 53, 101, svg);
          addElement('m62 118,L 37 103  Q 31 111 26 120 L 55 132  Q 58 126 62 118', 'green', 21, 42, 117, svg);
          addElement('m55 132,L 26 120  Q 22 130 18 141 L 49 149  Q 52 141 55 132', 'green', 22, 33, 134, svg);
          addElement('m49 149 ,L18 141   Q 16 152 14 163   L 47 165  Q 48 157 49 149', 'green', 23, 28, 154, svg);
          addElement('m47 165,L 14 163  Q 13 172 13 184 L 46 182   Q 47 174 47 165', 'green', 24, 27, 173, svg);
          addElement('m46 182,L 13 184  Q 14 195 16 205 L 48 200  Q 47 191 46 182', 'green', 25, 29, 192, svg);
          addElement('m48 200,L16 205  Q 18 214 21 225 L 52 216  Q 50 208 48 200', 'green', 26, 33, 211, svg);
          addElement('m52 216 ,L 21 225  Q 25 234 32 246 L 59 232  Q 55 225 52 216', 'green', 27, 39, 230, svg);
          addElement('m59 232,L32 246  Q 38 255 46 264   L 70 246  Q 64 240 59 232', 'green', 28, 50, 246, svg);
          addElement('m70 246 ,L46 264  Q 56 272 67 280 L 84 258   Q 76 252 70 246', 'green', 29, 65, 262, svg);
          addElement('m84 258, L 67 280 Q 79 286 91 291 L 102 267 Q 92 263 84 258 ', 'green', 30, 84, 275, svg);
          addElement('m102 267 ,L 91 291 Q 108 295 122 296 L 124 270  Q 112 269 102 267', 'green', 31, 109, 282, svg);
        };

        //C--SVG图
        function createCostChart() {
          var body = document.getElementById("c-chart");
          var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
          svg.setAttribute("viewBox", "0 0 270 360");
          body.appendChild(svg);

          var t = document.createElementNS('http://www.w3.org/2000/svg', 'text');
          t.setAttribute("transform", "matrix(14.605068678223846,0,0,13.28111001090795,-1538.805049635418,-1343.96548548741)");
          t.setAttribute('font-size', '24');
          t.setAttribute('id', 'svg_1');
          t.setAttribute('font-family', 'Helvetica, Arial, sans-serif');
          t.setAttribute('text-anchor', 'start');
          t.setAttribute('fill', '#c9c0c0');
          t.innerHTML = 'C';
          svg.appendChild(t);

          t = document.createElementNS('http://www.w3.org/2000/svg', 'text');
          t.setAttribute("x", 100);
          t.setAttribute("y", 15);
          t.setAttribute('font-size', '20');
          t.setAttribute("stroke", "#FFF");
          t.setAttribute("fill", "#FFF");
          t.setAttribute('font-family', '微软雅黑');
          t.innerHTML = "COST";
          svg.appendChild(t);

          t = document.createElementNS('http://www.w3.org/2000/svg', 'text');
          t.setAttribute("x", 105);
          t.setAttribute("y", 40);
          t.setAttribute('font-size', '20');
          t.setAttribute("stroke", "#FFF");
          t.setAttribute("fill", "#FFF");
          t.setAttribute('font-family', '微软雅黑');
          t.innerHTML = "成 本";
          svg.appendChild(t);

          //生成红色标记
          t = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
          t.setAttribute("x", 75);
          t.setAttribute("y", 310);
          t.setAttribute("stroke", "red");
          t.setAttribute("fill", "red");
          t.setAttribute("width", "18");
          t.setAttribute("height", "18");
          svg.appendChild(t);

          //生产文字'问题数 > 1'
          t = document.createElementNS('http://www.w3.org/2000/svg', 'text');
          t.setAttribute("x", 100);
          t.setAttribute("y", 325);
          t.setAttribute('font-size', '20');
          t.setAttribute("stroke", "#FFF");
          t.setAttribute("fill", "#FFF");
          t.setAttribute('font-family', '微软雅黑');
          t.innerHTML = "问题数 > 1";
          svg.appendChild(t);

          //生成绿色标记
          t = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
          t.setAttribute("x", 75);
          t.setAttribute("y", 335);
          t.setAttribute("stroke", "#00FF00");
          t.setAttribute("fill", "#00FF00");
          t.setAttribute("width", "18");
          t.setAttribute("height", "18");
          svg.appendChild(t);

          //生成文字'问题数 = 0'
          t = document.createElementNS('http://www.w3.org/2000/svg', 'text');
          t.setAttribute("x", 100);
          t.setAttribute("y", 350);
          t.setAttribute('font-size', '20');
          t.setAttribute("stroke", "#FFF");
          t.setAttribute("fill", "#FFF");
          t.setAttribute('font-family', '微软雅黑');
          t.innerHTML = "问题数 = 0";
          svg.appendChild(t);

          addElement('m208 207,L242 215 Q 239 224 236 233 L 203 223 Q 205 216 208 207', 'green', 1, 223, 219, svg);
          addElement('m203 223,L236 233 Q 231 241 227 249 L 196 235 Q 200 229 203 223', 'red', 2, 217, 234, svg);
          addElement('m196 235,L227 249 Q 220 257 214 264 L 189 244 Q 193 240 196 235', 'green', 3, 209, 248, svg);
          addElement('m189 244,L 214 264 Q 205 271 195 277 L 179 253 Q 184 249 189 244', 'green', 4, 197, 260, svg);
          addElement('m179 253,L195 277 Q 185 282 175 286 L 165 260 Q 171 257 179 253', 'green', 5, 181, 270, svg);
          addElement('m165 260,L 175 286 Q 164 291 153 292 L 148 264  Q 156 263 165 260', 'green', 6, 162, 277, svg);
          addElement('m148 264,L 153 292 Q 141 293 130 293 L 131 266  Q 139 265 148 264', 'green', 7, 142, 280, svg);
          addElement('m131 266,L130 293 Q 118 292 107 290  L 113 263  Q 122 265 131 266', 'green', 8, 122, 279, svg);
          addElement('m113 263,L107 290 Q 85 286 84 283 L 98 258 Q 104 260 113 263', 'green', 9, 103, 274, svg);
          addElement('m98 258,L 84 283 Q 75 278 66 273 L 84 250 Q 90 254 98 258', 'green', 10, 81, 266, svg);
          addElement('m84 250,L 66 273 Q 58 267 50 259 L 74 241 Q 78 245 84 250', 'green', 11, 65, 257, svg);
          addElement('m74 241,L 50 259 Q 43 251 38 242 L 66 229 Q 69 234 74 241', 'green', 12, 52, 243, svg);
          addElement('m 66 229,L 38 242  Q 33 234 30 226  L 60 216  Q 63 222 66 229', 'green', 13, 45, 228, svg);
          addElement('m 60 216,L 30 226 Q 26 216  24 209 L 57 202 Q 58 209 60 216', 'green', 14, 39, 212, svg);
          addElement('m 57 202,L 24 209 Q 22 199 21 192 L 55 189 Q 56 195 57 202', 'green', 15, 35, 197, svg);
          addElement('m55 189,L21 192 Q 20 184 20 176 L 54 176 Q 54.5 182 55 189', 'green', 16, 34, 183, svg);
          addElement('m 54 176, L  20 176 Q 19 167 20 160 L 54 161 Q 54.5 168 54 176', 'green', 17, 34, 168, svg);
          addElement('m54 161,L 20 160  Q 20 151 22 144 L 56 149  Q 55 155 54 161', 'green', 18, 35, 153, svg);
          addElement('m56 149,L 22 144  Q 24 135 26 127 L 59 136 Q 57 142 56 149', 'green', 19, 39, 139, svg);
          addElement('m59 136,L26 127 Q 29 119 33 112 L 64 123  Q 60 130 59 136', 'green', 20, 44, 124, svg);
          addElement('m64 123,L 33 112 Q 38 102 43 95 L 71 110  Q 67 116 64 123', 'green', 21, 51, 109, svg);
          addElement('m71 110,L 43 95 Q 51 87 59 79 L 79 101 Q 74 106 71 110', 'green', 22, 60, 94, svg);
          addElement('m79 101,L 59 79 Q 68 74 78 68 L 93 91 Q 85 95 79 101', 'green', 23, 75, 82, svg);
          addElement('m93 91,L 78 68 Q 88 64 100 60 L 109 84 Q 101 87 93 91', 'green', 24, 93, 74, svg);
          addElement('m109 84,L 100 60 Q 111 57 124 55 L 127 81 Q 118 82 109 84', 'green', 25, 113, 68, svg);
          addElement('m127 81,L 124 55 Q 137 55 150 56 L 146 81  Q 136 81 127 81', 'green', 26, 135, 67, svg);
          addElement('m146 81 ,L 150 56 Q 162 57 174 60 L 165 85 Q 154 82 146 81', 'green', 27, 158, 69, svg);
          addElement('m165 85,L 174 60 Q 186 64 200 72 L180 94 Q 172 89 165 85', 'green', 28, 178, 75, svg);
          addElement('m180 94,L200 72   Q 208 78 217 86 L 192 105   Q 187 99 180 94', 'green', 29, 197, 87, svg);
          addElement('m192 105,L217 86  Q 223 94 229 103 L 199 116  Q 196 111 192 105', 'green', 30, 209, 101, svg);
          addElement('m199 116 ,L229 103  Q 233 112 237 121 L 204 129  Q 201 122 199 116', 'green', 31, 218, 116, svg);
        };

        //D--SVG图
        function createDeliveryChart() {
          var body = document.getElementById("d-chart");
          var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
          svg.setAttribute("viewBox", "0 0 270 360");
          body.appendChild(svg);

          var t = document.createElementNS('http://www.w3.org/2000/svg', 'text');
          t.setAttribute("x", 105.343346);
          t.setAttribute("y", 122.672754);
          t.setAttribute("transform", "matrix(15.288862974380933,0,0,13.28111001090795,-1610.8059724484322,-1343.96548548741)");
          t.setAttribute('font-size', '24');
          t.setAttribute('id', 'svg_1');
          t.setAttribute('font-family', 'Helvetica, Arial, sans-serif');
          t.setAttribute('text-anchor', 'start');
          t.setAttribute('fill', '#c9c0c0');
          t.innerHTML = 'D';
          svg.appendChild(t);

          t = document.createElementNS('http://www.w3.org/2000/svg', 'text');
          t.setAttribute("x", 80);
          t.setAttribute("y", 15);
          t.setAttribute('font-size', '20');
          t.setAttribute("stroke", "#FFF");
          t.setAttribute("fill", "#FFF");
          t.setAttribute('font-family', '微软雅黑');
          t.innerHTML = "DELIVERY";
          svg.appendChild(t);

          t = document.createElementNS('http://www.w3.org/2000/svg', 'text');
          t.setAttribute("x", 105);
          t.setAttribute("y", 40);
          t.setAttribute('font-size', '20');
          t.setAttribute("stroke", "#FFF");
          t.setAttribute("fill", "#FFF");
          t.setAttribute('font-family', '微软雅黑');
          t.innerHTML = "交 付";
          svg.appendChild(t);

          //生成红色标记
          t = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
          t.setAttribute("x", 75);
          t.setAttribute("y", 310);
          t.setAttribute("stroke", "red");
          t.setAttribute("fill", "red");
          t.setAttribute("width", "18");
          t.setAttribute("height", "18");
          svg.appendChild(t);

          //生产文字'问题数 > 1'
          t = document.createElementNS('http://www.w3.org/2000/svg', 'text');
          t.setAttribute("x", 100);
          t.setAttribute("y", 325);
          t.setAttribute('font-size', '20');
          t.setAttribute("stroke", "#FFF");
          t.setAttribute("fill", "#FFF");
          t.setAttribute('font-family', '微软雅黑');
          t.innerHTML = "问题数 > 1";
          svg.appendChild(t);

          //生成绿色标记
          t = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
          t.setAttribute("x", 75);
          t.setAttribute("y", 335);
          t.setAttribute("stroke", "#00FF00");
          t.setAttribute("fill", "#00FF00");
          t.setAttribute("width", "18");
          t.setAttribute("height", "18");
          svg.appendChild(t);

          //生成文字'问题数 = 0'
          t = document.createElementNS('http://www.w3.org/2000/svg', 'text');
          t.setAttribute("x", 100);
          t.setAttribute("y", 350);
          t.setAttribute('font-size', '20');
          t.setAttribute("stroke", "#FFF");
          t.setAttribute("fill", "#FFF");
          t.setAttribute('font-family', '微软雅黑');
          t.innerHTML = "问题数 = 0";
          svg.appendChild(t);

          addElement('m63 258,L63 285 L87 285 L 87 258 L 63 258', 'green', 1, 76, 270, svg);
          addElement('m87 258 ,L87 285 L117 285 L 117 258  L 87 258', 'red', 2, 104, 270, svg);
          addElement('m117 258 ,L117 285 L149 284 L 139 257  L117 258', 'green', 3, 131, 270, svg);
          addElement('m139 257,L149 284 Q 165 281 180 276 L 167 251   Q 154 255 139 257', 'green', 4, 160, 267, svg);
          addElement('m167 251,L180 276 Q 196 269 208 260 L 184 240  Q 176 246 167 251', 'green', 5, 186, 258, svg);

          addElement('m184 240,L208 260  Q 218 251 226 240 L 195 226  Q 190 233 184 240', 'red', 6, 204, 241, svg);
          addElement('m195 226 ,L 226 240 Q 231 231 236  220 L 202 211  Q 200 218 195 226', 'red', 7, 216, 224, svg);
          addElement('m202 211,L236  220 Q 240 210 242 199  L 207 194  Q 205 202 202 211', 'red', 8, 224, 205, svg);
          addElement('m207 194,L 242 199  Q 244 187  245 178 L 208 176   Q 208 184 207 194', 'red', 9, 228, 186, svg);
          addElement('m208 176,L245 178 Q 245 166 244 158 L 208 158  Q 209 167 208 176', 'green', 10, 225, 167, svg);
          addElement('m208 158,L244 158 Q 243 147 241 138 L 206 141  Q 207 149 208 158', 'green', 11, 225, 148, svg);
          addElement('m206 141,L241 138 Q 238 125 235 116 L 201 125  Q 204 132 206 141', 'red', 12, 220, 129, svg);
          addElement('m201 125,L235 116 Q 230 106 225 97  L 193 112  Q 197 117 201 125', 'red', 13, 213, 111, svg);
          addElement('m193 112,L 225 97 Q 217 87  206 78 L 181 99   Q 187 105 193 112', 'red', 14, 201, 94, svg);
          addElement('m181 99,L206 78 Q 194 70 178 63 L 166 90  Q 174 94 181 99', 'red', 15, 182, 81, svg);
          addElement('m 166 90,L178 63 Q 162 59 148 57 L 144 85  Q 154 86 166 90', 'red', 16, 157, 74, svg);
          addElement('m144 85 , L148 57 Q 142 57 115 56 L 115 84  Q 140 84 144 85', 'red', 17, 127, 71, svg);
          addElement('m115 84,L115 56 L 89 56 L 88 84 L115 84 ', 'green', 18, 99, 71, svg);
          addElement('m88 84,L89 56 L 63 56 L 63 84 L 88 84 ', 'red', 19, 73, 71, svg);
          addElement('m63 84,L63 56 L 28 56 L 28 72 L63 84 ', 'red', 20, 42, 65, svg);
          addElement('m28 72, L63 84 L 63 93 L 28 93 L28 72 ', 'red', 21, 42, 85, svg);
          addElement('m28 93,L63 93 L 63 111 L 28 111 L28 93 ', 'red', 22, 42, 102, svg);
          addElement('m28 111,L 63 111 L 63 131 L 28 131 L28 111 ', 'red', 23, 42, 121, svg);
          addElement('m28 131,L 63 131 L 63 150 L 28 150 L28 131 ', 'red', 24, 42, 140, svg);
          addElement('m28 150,L 63 150 L 63 168 L 28 168 L28 150 ', 'red', 25, 42, 159, svg);
          addElement('m28 168,L 63 168 L 63 187 L 28 187 L28 168 ', 'red', 26, 42, 178, svg);
          addElement('m28 187,L 63 187 L 63 207 L 28 207 L28 187 ', 'red', 27, 42, 197, svg);
          addElement('m28 207,L 63 207 L 63 228 L 28 228 L28 207 ', 'red', 28, 42, 217, svg);
          addElement('m28 228,L 63 228 L 63 243 L 28 243 L28 228 ', '', 29, 42, 235, svg);
          addElement('m28 243,L 63 243 L 63 257 L 28 267 L28 243 ', '', 30, 42, 254, svg);
          addElement('m28 267,L 63 257 L 63 285 L 28 285 L28 267 ', '', 31, 42, 273, svg);
        };

        //P--SVG图
        function createPersonChart() {
          var body = document.getElementById("p-chart");
          var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
          svg.setAttribute("viewBox", "0 0 270 360");
          body.appendChild(svg);

          var t = document.createElementNS('http://www.w3.org/2000/svg', 'text');
          t.setAttribute("x", 101.5);
          t.setAttribute("y", 126.475147);
          t.setAttribute("transform", "matrix(16.625954189664085,0,0,13.281110010907954,-1686.664063439021,-1388.4654854874102) ");
          t.setAttribute('font-size', '24');
          t.setAttribute('id', 'svg_1');
          t.setAttribute('font-family', 'Helvetica, Arial, sans-serif');
          t.setAttribute('text-anchor', 'start');
          t.setAttribute('fill', '#c9c0c0');
          t.innerHTML = 'P';
          svg.appendChild(t);

          t = document.createElementNS('http://www.w3.org/2000/svg', 'text');
          t.setAttribute("x", 90);
          t.setAttribute("y", 15);
          t.setAttribute('font-size', '20');
          t.setAttribute("stroke", "#FFF");
          t.setAttribute("fill", "#FFF");
          t.setAttribute('font-family', '微软雅黑');
          t.innerHTML = "PERSON";
          svg.appendChild(t);

          t = document.createElementNS('http://www.w3.org/2000/svg', 'text');
          t.setAttribute("x", 105);
          t.setAttribute("y", 40);
          t.setAttribute('font-size', '20');
          t.setAttribute("stroke", "#FFF");
          t.setAttribute("fill", "#FFF");
          t.setAttribute('font-family', '微软雅黑');
          t.innerHTML = "人 员";
          svg.appendChild(t);

          //生成红色标记
          t = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
          t.setAttribute("x", 75);
          t.setAttribute("y", 310);
          t.setAttribute("stroke", "red");
          t.setAttribute("fill", "red");
          t.setAttribute("width", "18");
          t.setAttribute("height", "18");
          svg.appendChild(t);

          //生产文字'问题数 > 1'
          t = document.createElementNS('http://www.w3.org/2000/svg', 'text');
          t.setAttribute("x", 100);
          t.setAttribute("y", 325);
          t.setAttribute('font-size', '20');
          t.setAttribute("stroke", "#FFF");
          t.setAttribute("fill", "#FFF");
          t.setAttribute('font-family', '微软雅黑');
          t.innerHTML = "问题数 > 1";
          svg.appendChild(t);

          //生成绿色标记
          t = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
          t.setAttribute("x", 75);
          t.setAttribute("y", 335);
          t.setAttribute("stroke", "#00FF00");
          t.setAttribute("fill", "#00FF00");
          t.setAttribute("width", "18");
          t.setAttribute("height", "18");
          svg.appendChild(t);

          //生成文字'问题数 = 0'
          t = document.createElementNS('http://www.w3.org/2000/svg', 'text');
          t.setAttribute("x", 100);
          t.setAttribute("y", 350);
          t.setAttribute('font-size', '20');
          t.setAttribute("stroke", "#FFF");
          t.setAttribute("fill", "#FFF");
          t.setAttribute('font-family', '微软雅黑');
          t.innerHTML = "问题数 = 0";
          svg.appendChild(t);

          addElement('m69 170,L69 198 L89 198 L 89 170 L69 170', 'green', 1, 81, 183, svg);
          addElement('m89 170,L89 198 L109 198 L 109 170 L 89 170', 'green', 2, 101, 183, svg);
          addElement('m109 170 ,L109 198 L 129 198 L 129 170  L109 170', 'green', 3, 121, 183, svg);
          addElement('m129 170,L129 198 Q 154 197 154 196 L 154 169   Q 158 169 129 170', 'green', 4, 143, 183, svg);
          addElement('m154 169,L154 196 Q 175 194 184 192 L175 165  Q 173 167  154 169   ', 'green', 5, 168, 181, svg);
          addElement('m175 165, L184 192 Q 204 189  217 182  L 193 159  Q 188 162 175 165', 'green', 6, 193, 174, svg);
          addElement('m193 159 , L217 182 Q 226 175  234 166  L 203 148  Q 199 153 193 159', 'green', 7, 212, 163, svg);
          addElement('m203 148, L234 166 Q 240 156  244 146  L 207 138  Q 206 142 203 148', 'green', 8, 222, 149, svg);
          addElement('m207 138,L244 146 Q 246 134  246 124  L 208 124   Q 208 130 207 138', 'green', 9, 227, 132, svg);
          addElement('m208 124,L246 124 Q 245 113  242 104  L 205 113  Q 206 118 208 124', 'green', 10, 223, 116, svg);
          addElement('m205 113,L242 104 Q 234 92 228 84 L 198 104  Q 202 108 205 113', 'green', 11, 217, 100, svg);
          addElement('m198 104,L228 84 Q 216 75 206 70 L 190 97  Q 194 100 198 104', 'green', 12, 204, 87, svg);
          addElement('m190 97,L206 70 Q 194 66 182 64  L 175 91  Q 183 93 190 97', 'green', 13, 186, 80, svg);
          addElement('m175 91,L182 64 Q 169 63  156 62 L 156 89   Q 166 89 175 91', 'green', 14, 165, 75, svg);
          addElement('m156 89,L156 62 L 134 62 L 134 89 L156 89 ', 'green', 15, 144, 75, svg);
          addElement('m134 89,L134 62 L 112 62 L 112 89 L134 89  ', 'green', 16, 121, 75, svg);
          addElement('m112 89,L112 62 L 87 62 L 87 89 L112 89 ', 'green', 17, 98, 75, svg);
          addElement('m89 89,L 89 62 L 69 62 L 69 89 L87 89 ', 'green', 18, 77, 75, svg);
          addElement('m69 89,L 69 62 L 31 62 L 31 78 L 69 89 ', 'green', 19, 49, 73, svg);
          addElement('m69 89,L 31 78 L 31 105 L 69 105 L69 89 ', 'green', 20, 49, 94, svg);
          addElement('m69 105, L 31 105  L 31 121 L 69 121 L69 105 ', 'green', 21, 49, 112, svg);
          addElement('m69 121,L31 121   L 31 137 L 69 137 L69 121 ', 'red', 22, 49, 128, svg);
          addElement('m69 137,L31 137   L 31 153 L 69 153 L69 137 ', 'green', 23, 49, 144, svg);
          addElement('m69 153,L 31 153   L 31 170 L 69 170 L69 153 ', 'red', 24, 49, 161, svg);
          addElement('m69 170,L 31 170   L 31 187 L 69 187 L69 170 ', 'green', 25, 49, 178, svg);
          addElement('m69 187,L31 187   L 31 204 L 69 204 69 187 ', 'red', 26, 49, 194, svg);
          addElement('m69 204,L 31 204   L 31 221 L 69 221 69 204 ', 'green', 27, 49, 212, svg);
          addElement('m69 221,L  31 221  L 31 238 L 69 238 L69 221 ', 'red', 28, 49, 228, svg);
          addElement('m69 238,L 31 238  L 31 255 L 69 255 L69 238 ', '', 29, 49, 245, svg);
          addElement('m69 255,L  31 255   L 31 271 L 69 271 L69 255 ', '', 30, 49, 262, svg);
          addElement('m69 271,L 31 271   L 31 290 L 69 290 L69 271 ', '', 31, 49, 280, svg);
        };

        function GetSafe() {
          var chart = echarts.init(document.getElementById('s'));
          var option = {
            title: {
              show: false,
              text: 'S（安全）指标执行得分',
              x: 'center',
              textStyle: {
                color: '#FFF',
                fontSize: '14',
                fontWeight: 'bold'
              }
            },
            tooltip: {
              trigger: 'axis',
              show: false,
              axisPointer: {
                type: 'shadow'
              }
            },
            grid: {
              left: '1%',
              right: '1%',
              bottom: '1%',
              containLabel: true
            },
            legend: {
              data: ['得分'],
              x: '10',
              y: '10',
              textStyle: {
                fontSize: '14',
                fontWeight: 'bold',
                color: '#FFF'
              }
            },
            color: ['#00BFFF', '#32CD32'],
            xAxis: [
              {
                type: 'category',
                axisTick: {
                  alignWithLabel: true
                },
                axisLine: {
                  lineStyle: {
                    color: '#FFF',
                    width: '2'
                  }
                },
                axisLabel: {
                  show: true,
                  textStyle: {
                    color: '#FFF',
                    fontSize: '14',
                    fontWeight: 'bold'
                  }
                },
                data: ['安全巡查', '安全隐患整改', '安全培训', '三违现象']
              }
            ],
            yAxis: [
              {
                type: 'value',
                axisLine: {
                  lineStyle: {
                    color: '#FFF',
                    width: '2'
                  }
                },
                axisLabel: {
                  show: true,

                  textStyle: {
                    color: '#FFF',
                    fontSize: '14',
                    fontWeight: 'bold'
                  }
                },
                splitLine: {
                  show: false,
                  lineStyle: {
                    color: '#999',
                    type: 'dashed'
                  }
                }
              }
            ],
            series: [
              {
                name: '得分',
                type: 'bar',
                barMaxWidth: 30,
                data: [100, 100, 80, 70],
                itemStyle: {
                  normal: {
                    label: {
                      show: true,
                      position: 'top',
                      fontSize: '14',
                      fontWeight: 'bold'
                    }
                  }
                }
              }
            ]
          };
          chart.setOption(option);

        }

        function GetQuality() {
          var chart = echarts.init(document.getElementById('q'));
          var option = {
            title: {
              show: false,
              text: 'Q（质量）指标执行得分',
              x: 'center',
              textStyle: {
                color: '#FFF',
                fontSize: '14',
                fontWeight: 'bold'
              }
            },
            tooltip: {
              trigger: 'axis',
              show: false,
              axisPointer: {
                type: 'shadow'
              }
            },
            grid: {
              left: '1%',
              right: '1%',
              bottom: '2%',
              containLabel: true
            },
            legend: {
              data: ['得分'],
              x: '10',
              y: '10',
              textStyle: {
                fontSize: '14',
                fontWeight: 'bold',
                color: '#FFF'
              }
            },
            color: ['#00BFFF', '#32CD32'],
            xAxis: [
              {
                type: 'category',
                axisTick: {
                  alignWithLabel: true
                },
                axisLine: {
                  lineStyle: {
                    color: '#FFF',
                    width: '2'
                  }
                },
                axisLabel: {
                  show: true,
                  textStyle: {
                    color: '#FFF',
                    fontSize: '14',
                    fontWeight: 'bold'
                  }
                },
                data: ['底层次问题', '不合格品', '零部件报废', '产品性能']
              }
            ],
            yAxis: [
              {
                type: 'value',
                axisLine: {
                  lineStyle: {
                    color: '#FFF',
                    width: '2'
                  }
                },
                axisLabel: {
                  show: true,

                  textStyle: {
                    color: '#FFF',
                    fontSize: '14',
                    fontWeight: 'bold'
                  }
                },
                splitLine: {
                  show: false,
                  lineStyle: {
                    color: '#999',
                    type: 'dashed'
                  }
                }
              }
            ],
            series: [
              {
                name: '得分',
                type: 'bar',
                barMaxWidth: 30,
                data: [100, 100, 80, 70],
                itemStyle: {
                  normal: {
                    label: {
                      show: true,
                      position: 'top',
                      fontSize: '14',
                      fontWeight: 'bold'
                    }
                  }
                }
              }
            ]
          };
          chart.setOption(option);
        }

        function GetCost() {
          var chart = echarts.init(document.getElementById('c'));
          var option = {
            title: {
              show: false,
              text: 'C（成本）指标执行得分',
              x: 'center',
              textStyle: {
                color: '#FFF',
                fontSize: '14',
                fontWeight: 'bold'
              }
            },
            tooltip: {
              trigger: 'axis',
              show: false,
              axisPointer: {
                type: 'shadow'
              }
            },
            grid: {
              left: '3%',
              right: '3%',
              bottom: '2%',
              containLabel: true
            },
            legend: {
              data: ['得分'],
              x: '10',
              y: '10',
              textStyle: {
                fontSize: '14',
                fontWeight: 'bold',
                color: '#FFF'
              }
            },
            color: ['#00BFFF', '#32CD32'],
            xAxis: [
              {
                type: 'category',
                axisTick: {
                  alignWithLabel: true
                },
                axisLine: {
                  lineStyle: {
                    color: '#FFF',
                    width: '2'
                  }
                },
                axisLabel: {
                  show: true,
                  textStyle: {
                    color: '#FFF',
                    fontSize: '14',
                    fontWeight: 'bold'
                  }
                },
                data: ['燃油消耗', '办公用品', '机物料消耗']
              }
            ],
            yAxis: [
              {
                type: 'value',
                axisLine: {
                  lineStyle: {
                    color: '#FFF',
                    width: '2'
                  }
                },
                axisLabel: {
                  show: true,
                  textStyle: {
                    color: '#FFF',
                    fontSize: '14',
                    fontWeight: 'bold'
                  }
                },
                splitLine: {
                  show: false,
                  lineStyle: {
                    color: '#999',
                    type: 'dashed'
                  }
                }
              }
            ],
            series: [
              {
                name: '得分',
                type: 'bar',
                barMaxWidth: 30,
                data: [100, 80, 70],
                itemStyle: {
                  normal: {
                    label: {
                      show: true,
                      position: 'top',
                      fontSize: '14',
                      fontWeight: 'bold'
                    }
                  }
                }
              }
            ]
          };
          chart.setOption(option);
        }

        function GetPerson() {
          var chart = echarts.init(document.getElementById('p'));
          var option = {
            title: {
              show: false,
              text: 'P（人员）指标执行得分',
              x: 'center',
              textStyle: {
                color: '#FFF',
                fontSize: '14',
                fontWeight: 'bold'
              }
            },
            tooltip: {
              trigger: 'axis',
              show: false,
              axisPointer: {
                type: 'shadow'
              }
            },
            grid: {
              left: '3%',
              right: '3%',
              bottom: '2%',
              containLabel: true
            },
            legend: {
              data: ['得分'],
              x: '10',
              y: '10',
              textStyle: {
                fontSize: '14',
                fontWeight: 'bold',
                color: '#FFF'
              }
            },
            color: ['#00BFFF', '#32CD32'],
            xAxis: [
              {
                type: 'category',
                axisTick: {
                  alignWithLabel: true
                },
                axisLine: {
                  lineStyle: {
                    color: '#FFF',
                    width: '2'
                  }
                },
                axisLabel: {
                  show: true,
                  textStyle: {
                    color: '#FFF',
                    fontSize: '14',
                    fontWeight: 'bold'
                  }
                },
                data: ['持续改善', '人员技能', '加班情况', '考勤情况', '疫情管控']
              }
            ],
            yAxis: [
              {
                type: 'value',
                axisLine: {
                  lineStyle: {
                    color: '#FFF',
                    width: '2'
                  }
                },
                axisLabel: {
                  show: true,

                  textStyle: {
                    color: '#FFF',
                    fontSize: '14',
                    fontWeight: 'bold'
                  }
                },
                splitLine: {
                  show: false,
                  lineStyle: {
                    color: '#999',
                    type: 'dashed'
                  }
                }
              }
            ],
            series: [
              {
                name: '得分',
                type: 'bar',
                barMaxWidth: 30,
                data: [85, 90, 75, 95, 100],
                itemStyle: {
                  normal: {
                    label: {
                      show: true,
                      position: 'top',
                      fontSize: '14',
                      fontWeight: 'bold'
                    }
                  }
                }
              }
            ]
          };
          chart.setOption(option);
        }

        function GetPichan() {
          var chart = echarts.init(document.getElementById('pichan'));
          var xinji = echarts.init(document.getElementById('xinji'));
          var jianxiu = echarts.init(document.getElementById('jianxiu'));
          var pieOption = {
            title: {
              text: '',
              left: "50%",
              textAlign: 'center',
              x: 'center',
              y: '75%',
              textStyle: {
                fontWeight: 'bold',
                fontSize: '16',
                color: '#FFF',
                textAlign: 'center'
              }
            },
            series: {
              name: '',
              type: 'pie',
              clockWise: true,
              radius: [40, 55],
              itemStyle: {
                normal: {
                  shadowBlur: 0,
                  label: {
                    show: false
                  },
                  labelLine: {
                    show: false
                  }
                }
              },
              hoverAnimation: false,
              center: ['50%', '50%'],
              data: [{
                value: [30],
                name: '完成',
                label: {
                  normal: {
                    formatter: "{d}%",
                    position: 'center',
                    show: true,
                    textStyle: {
                      color: '#FFF',
                      //color: "#00FF00",
                      fontSize: '18',
                      fontWeight: 'bold'
                    }
                  }
                },
                itemStyle: {
                  normal: {
                    color: "#009688"
                    //color: "#00FF00"
                  }
                }
              }, {
                value: [70],
                name: '未完成',
                itemStyle: {
                  normal: {
                    color: "#FFF"
                  }
                }
              }]
            }
          };
          chart.setOption(pieOption);
          xinji.setOption(pieOption);
          jianxiu.setOption(pieOption);
        }

        createSafeChart();
        createQualityChart();
        createCostChart();
        createDeliveryChart();
        createPersonChart();

        GetSafe();
        GetQuality();
        GetCost();
        GetPerson();
        GetPichan();
      });
    });
  </script>
</body>

</html>